<template>
	<view >
		<u-tabs  :list="referals_levels"
		 @change="tabsChange"
		 scrollable=false :current="current"></u-tabs>
		<view scroll-y class="referals-list" @scrolltolower="onreachBottom">
		
			<u-row class="item" gutter="16"
			 v-for="referals in referals_list"
			  v-show="!referals.hidden"
			  >
				<u-col span="4">
					<view class="avatar" >
						<u-image shape="circle" width="60rpx" height="60rpx" :src="referals.headUrl"></u-image>
						<text>{{referals.name}}</text>
						
					</view>

				</u-col>
				<u-col span="5">
					<view class="yiyang" >
						<view class="card">
							<text>会员：</text>
							<text v-if="referals.yiyang_card_hehuoren">合伙人</text>
							<text v-if="referals.yiyang_card_xiaofeizhe&&referals.yiyang_card_hehuoren">+</text>
							<text v-if="referals.yiyang_card_xiaofeizhe">消费者</text>
							<text v-if="!referals.yiyang_card_hehuoren && !referals.yiyang_card_xiaofeizhe">非会员</text>
						</view>
						<view class="agent">
							代理：
							<text v-if="!referals.yiyang_agent">无</text>
							<text v-else>{{referals.yiyang_agent.agent_name_text}}</text>
						
						</view>
					</view>
				
				</u-col>
				
				<u-col span="3">
					<view class="order-fenxiao" >
						<view class="order">订单数：{{referals.order_num}}</view>
						<view class="fenxiao"> {{referals.order_total?referals.order_total:0}}￥</view>
					</view>

				</u-col>
				
			</u-row>
			<view class="nothing" v-if="referals_list.length==0">
				当前没有下线成员
			</view>
			
		</view>
		
	</view>


</template>

<script>
	const appInstance = getApp();
	export default {
		data() {
			return {
				tabs: [1, 2],
				referals_levels: [
					{
						type: 'all',
						name: '所有下线'
					}, 
					{
						type: 'first',
						name: '一级下线'
					}, 
					{
						type: 'second',
						name: '二级下线'
					}, 
				],
				referals_list: [],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0,
			}
		},

		onLoad(options) {
			var that = this;
			var host = appInstance.globalData.api_host.split('/app')[0];
			appInstance.globalData.checkUserStatus();
			this.init(options);
		},
		onPullDownRefresh() {
			this.init();
			setTimeout(function () {
			    uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {

			init: function() {

				this.get_referals();

			},
			get_referals: function() {

				var t = this;
				var url = '&r=distribution.referrals';

				appInstance.globalData.request(url, {
					m: 'sm_shop_plugin_distribution'
				}, 'GET', function(res) {
					t.referals_list = res.data;
				});

			},

			tabsChange(index) {
				console.log(index);
				this.swiperCurrent = index;
				this.current = index;
				this.referals_list.forEach(item=>{
					
					if( index == 0 ){
						item.hidden = 0;
					}else{
						item.hidden = item.lower_level==index?0:1;
					}
				});
				// if( index == 0 ){
				// 	this.referals_list.forEach(item=>{
				// 		item.hidden = 0;
				// 	});
				// }else if( index == 1 ){
				// 	this.referals_list.forEach(item=>{
						
				// 		item.hidden = item.referee == customer_id?0:1;
				// 	});
				// }else{
				// 	this.referals_list.forEach(item=>{
						
				// 		item.hidden = item.referee != customer_id?0:1;
				// 	});
				// }
				
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			}

		}
	}
</script>

<style lang="less" >
	@import './distributor.less';
	.u-tabs{
		width:100%;
		.u-tab-item{
			width:33%!important;
		}
	}
</style>
